<!DOCTYPE html>
<html lang="en">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<head>
    <meta charset="UTF-8">
    <title>ajax实现关键字联想和自动补全</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            -webkit-appearance: none;
        }


    </style>
</head>
<body>
<div style="padding: 12px;">




    <input type="text" id="search-input" style="padding: 18px; font-size: 25px;  width: 100%; ">
    <style>
        #dataDiv p { padding: 15px; cursor: pointer;font-size: larger; }
        #dataDiv p:hover { background-color: cornflowerblue;color: white; }
    </style>
    <div id="dataDiv" style=" background-color: wheat; width: 100%;display: none;">
        <!--
        <p>java</p>
        <p>jsp</p>
        <p>service</p>
        <p>servlet</p>
        <p>docker</p>
        <p>linux</p>
        -->
    </div>

    <script>
        // 使用防抖优化 input 搜索框实时查询
        function debounce(fn, delay) {
            let timerId;
            return function () {
                const args = arguments;
                const context = this;
                clearTimeout(timerId);
                timerId = setTimeout(function () {
                    fn.apply(context, args);
                }, delay);
            };
        }

        const searchInput = document.getElementById('search-input');
        const div_data = document.getElementById("dataDiv");

        searchInput.addEventListener('input', debounce(function () {
            const query = searchInput.value;
            console.log(query);
            // alert(query)
            if (query.trim() === "") {
                div_data.style.display = "none";
                return false;
            }
            if (query.trim() !== "") {
                //每当keyup时，发送ajax请求，传递文本框内数据
                var xmlHttpRequest = new XMLHttpRequest();
                xmlHttpRequest.open("GET", "/ajax/ajaxAutoComplete/" + this.value + "", true)
                xmlHttpRequest.send()
                xmlHttpRequest.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status === 200) {
                            //解析后端传来的json数据:[{"content" : "data"}, {}, {}]
                            const jsonArray = JSON.parse(this.responseText);
                            let html = "";
                            for (let i = 0; i < jsonArray.length; i++) {
                                const perData = jsonArray[i].content;
                                //为p标签绑定单击事件,将数据以字符串的形式传给回调函数
                                // html += "<p onclick='addData(\"" + perData + "\")'>" + perData + "</p>"
                                html += `<p onclick="addData('${perData}')"> ${perData} </p>`
                            }
                            div_data.innerHTML = html
                            div_data.style.display = "block"
                        } else {
                            alert("异常状态码: " + this.status)
                        }
                    }
                }
            }
            // search(query);
        }, 500));

        function addData(perData) {
            //完成自动补全
            searchInput.value = perData;
            //隐藏提示层
            div_data.style.display = "none";
        }
    </script>


















</div>

</body>

<!--
    需求:
        1. 给定文本输入框，显示层，显示层里的显示栏
        2. 当用户在文本框里输入数据时，发生keyup事件时，将文本框里的数据，以ajax请求方式提交的到后端
        3. 后端对前端提交的关键字，在数据库里进行模糊查询
        4. 将后端查询到的数据以json格式传给前端
        5. 前端解析后端传来的数据，将数据显示在提示栏里
        6. 当用户点击提示中的某条提示信息时，将提示栏里的信息赋给输入框，隐藏提示层
        注意：1. 凡是输入框里发生keyup事件时，都要进行ajax请求提交，实时获取提示信息
             2. 输入框信息为空时，也要隐藏提示层
-->
</html>
